
// import React, { useState } from 'react'
// import MyComponent1, {change1_Ob} from "./MyComponent1";
// // import Immutable from 'immutable';
// // import CounterIntent from "./intent/CounterIntent";
// // import BookCategoryModel from "./models/BookCategoryModel";
// // // import CounterIntent from "./intent/CounterIntent";
// import { interval, Observable, timer } from 'rxjs'
// import { exhaustMap, mapTo, scan, switchMap } from 'rxjs/operators'

import { useObservable } from "rxjs-hooks";
import { map } from "rxjs/operators";
import {interval} from "rxjs/internal/observable/interval";
import * as React from "react";


// function App() {
//   const
//
//   return (
//     <div className="App">
//       <h1>Incremental number: {value}</h1>
//     </div>
//   );
// }

// console.log(Observable)
// let event = Observable.of('foo', 'bar')
// event.subscribe({
//   next: (event) => {
//     console.log(`你刚刚输入了! ${event}`)
//   },
//   error: (err) => console.log(`Oops... ${err}`),
//   complete: () => console.log(`完成!11`)
// })


// name为必填
const Hello = ({name}) => <div>Hello,{name}</div>;

// 约束 name 的类型
const SFCHello: React.SFC<{ name: string }> = ({name}) => (
  <div>Hello,{name}</div>
);

class Message extends React.Component<
{
  message: string;
},
{
  count: number;
}> {
  private value: any;

  constructor(props) {
    super(props);
    // Observable.of(1,2,3).map(function (x) { return x + '!!!'; }); // 等等
    this.state = {
      count: 0
    };

    // console.log(typeof ( (() => interval(500).pipe(map((val) => val * 3)))() ))
    useObservable(() => interval(500).pipe(map((val) => val * 3)));
  }


  public componentDidMount() {

    console.log('Message componentDidMount')
    // this.state.count = db.count
    // .map(() => state => {
    //     console.log(state)
    //     return Object.assign({}, state, {count: state.count + 1})
    // });
    //
    // var state = increase.scan((state, changeFn) => changeFn(state), {count: 0});
    //
    // state.subscribe((state) => {
    //     this.setState({
    //         count: state.count
    //     })
    // });
  }

  public increment = () => {
    // const { count } = this.state;
    // this.setState({
    //     count: count + 1
    // });

    // observable.subscribe(x => console.log(x))
  };

  public render() {
    return (
      <div id="button11"
           onClick={this.increment}
      >
        {this.value}
        |||
        {this.props.message}
        |||
        {this.state.count}
      </div>
    );
  }
}


const Category = ({counter}) => {


  // public componentDidMount() {
  //   console.log('Category componentDidMount')
  //   console.log("end")
  //   // get_observable()
  //   // get_observable(this).MyComponent1.change1.subscribe(MyComponent1_state => {
  //   //   this.setState({
  //   //     user_name: 'aaaaaaa'
  //   //   })
  //   //   console.log(MyComponent1_state)
  //   // })
  //   // change1_Ob().subscribe(MyComponent1_state => console.log(MyComponent1_state))
  //   // get_observable().MyComponent1.change1.subscribe(MyComponent1_state => console.log(MyComponent1_state))
  // }

  return (
    <>
      <div>category</div>
      <Hello name={123}/>
      <SFCHello name="coder"/>
      <Message message="点击dfafas"/>
      {/*<MyComponent1 count={1}/>*/}
      {/*<MyComponent2 name={2}/>*/}
      {/*<div>counter {counter || -100}</div>*/}
      {/*<div onClick={() => {*/}
        {/*CounterIntent.incrementCounter();*/}
      {/*}}>handleIncrement*/}
      {/*</div>*/}
      {/*<div onClick={() => {*/}
        {/*CounterIntent.decreaseCounter();*/}
      {/*}}>handleDecrease*/}
      {/*</div>*/}
    </>
  )
}


// class BookCategroy extends React.Component <
//   {},
//   {
//
//   }
// > {
//
//   componentDidMount() {
//     BookCategoryModel.subject.subscribe(appState => {
//       this.setState({ ...appState });
//     });
//   }
//
//   render() {
//     return (
//       <>
//         <Category counter={this.state.counter}/>
//       </>
//     )
//   }
//
// }

// export function get_state() {
//   var initialState = {
//     foo: 'bar'
//   };
//
//   return change1_Ob()
//     .map(() => state => {
//       console.log(state)
//       return Object.assign({}, state, {count: state.count + 1})
//     })
//     .scan((state, changeFn) => changeFn(state), Immutable.fromJS(initialState));
// }

// Model.subject.subscribe(appState => {
//      this.setState({ ...appState });
//    });

export default Category
